<template>

  <div class="aaaa">
    <div class="div-box">
   
      <div class="div" v-for="(son,index) in list_a" :key="index">
        <div class="question">问题:{{son.question }}</div>
        <div class="type">类型：{{son.type=== 1 ? '单选' : '多选' }}</div>
        <div v-if="son.type === 1" class="answer">
          <label v-for="(sson,index1) in son.answer" :key="index1">

            <input type="radio" :name="son.name" :value="sson.value" @change="get_radio_value(index)" v-model="checkedValue[index]">
            <span>{{sson.value}}</span>

          </label>
          <div style="clear: both"></div>
        </div>
        <div v-else class="answer">
          <label v-for="(sson,index1) in son.answer" :key="index1">
            <input type="checkbox" :name="son.name" :value="sson.value" @change="get_checkbox_value(index)" v-model="checkedValue1">
            <span>{{sson.value}}</span>
          </label>
        </div>
      </div>
    </div>
    <div class="button">
      <el-button @click="btnfun" class="button" type="primary">{{subIndex==0?'提交':'已提交'}}</el-button>
    </div>

    <!-- <el-button disabled v-else>已提交</el-button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      list_a: [
        { 'type': 1, 'name': 'one', 'question': 'Are you programmer?', 'answer': [{ 'value': 'A.Yes' }, { 'value': 'B.No' }], },
        { 'type': 1, 'name': 'two', 'question': 'Are you a man?', 'answer': [{ 'value': 'A.Of course' }, { 'value': 'B.No' }] },
        { 'type': 1, 'name': 'three', 'question': 'Are you a Staff?', 'answer': [{ 'value': 'A.Yes' }, { 'value': 'B.No' }] },
        { 'type': 1, 'name': 'four', 'question': 'Are you in sichuan?', 'answer': [{ 'value': 'A.Yes' }, { 'value': 'B. No' }] },
        { 'type': 2, 'name': 'five', 'question': 'How about your in skills?', 'answer': [{ 'value': 'A.Python' }, { 'value': 'B.Vue' }, { 'value': 'C.Php' }, { 'value': 'D.Java' }] }
      ],
      all_list: [],
      checkedValue: [], // 绑定单选框的值
      checkedValue1: [],// 绑定复选框的值
      subIndex: 0,
      all_list1: [],
      chooseIndex: false,
      choosechecked: ''
    }
  },
  mounted() {

    // 测试案列
    // console.log(Math.round(0.29 * 100));
    // console.log((0.1 * 1000 + 0.2 * 1000) / 1000 == 0.3)
    //true);


  },
  methods: {

    btnfun() {
      // 获取input框的值

      // 如果答案长度不匹配list_a

      for (var i = 0; i < this.all_list.length; i++) {
        if (this.all_list[i] == '' || typeof (this.all_list[i]) == 'undefined') {
          this.all_list.splice(i, 1)
        }
      }
      // 循环
      if (this.list_a.length !== this.all_list.length) {
        this.$message.error('您有未答题的选项');
      } else {
        this.subIndex = 1
        // console.log( document.querySelector('input[type="radio"]').disabled);
        document.querySelectorAll('input[type="radio"]').disabled = true

        // 传值给调用页面
        this.$router.push({
          path: "/areaDetail/fileFour",
          query: {
            transfer: this.all_list
          }
        })

      }
    },
    get_radio_value: function (index) {
      // 获取当前radio当前值
      // console.log( this.list_a[index].answer);
      // console.log(this.checkedValue[index]);



      // console.log();
      this.all_list[index] = this.checkedValue[index]
    },
    get_checkbox_value: function (index) {
      // 获取当前复选框的值
      // console.log((index + 1) + '题' + this.checkedValue1)

      this.all_list[index] = this.checkedValue1


    }
  },
}
</script>
<style scoped lang='scss'>
* {
  font-family: monospace;
}
li {
  
  list-style: none;
}
.div {
  margin: 6px 0px;
}
label{
    cursor: pointer;
}
.question {
  width: 300px;
  text-align: left;
}
.type {
  width: 200px;
  text-align: left;
}
.answer {
  padding-bottom: 5px;
  label {
    display: flex;
    width: 100%;
    align-items: center;
  }
  span {
    margin-left: 10px;
  }
}
.div-box .div:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>